<template>
  <div>
    <van-nav-bar title="编辑个人资料" left-text="返回" left-arrow @click="onClickLeft" />
  </div>

  <van-config-provider :theme-vars="cellFieldTheme">
    <div style="padding-left: 10px;">
      <van-field label="用户名" v-model="userInfo.username" disabled label-align="top" />
      <van-field label="昵称" v-model="userInfo.nickname" label-align="top" />
      <van-field label="手机号" v-model="userInfo.phone" label-align="top" />
      <van-field label="邮箱" v-model="userInfo.email" label-align="top" />
    </div>
    <div class="bottom-btn">
      <van-button plain block @click="writeOff">删除账号</van-button>
      <van-button type="primary" @click="updateUserInfo" block>更新个人资料</van-button>
    </div>
  </van-config-provider>

</template>

<script setup>
import router from '@/router';
import useUserStore from '@/store/user';
import { getStorage } from '@/utils/localStorage';
import { showConfirmDialog } from 'vant';
import { reactive, ref, toRefs } from 'vue';


const { userInfo, userDelete, userUpdate } = toRefs(useUserStore())

userInfo.value = getStorage('userStore').userInfo
// 是否点击了确认按钮
const clickConfirmBtn = ref(false)

// 复制一份最原始的用户信息
const originUserInfo = ref(JSON.parse(JSON.stringify(userInfo.value)))

// 点击返回按钮
const onClickLeft = () => {
  // 先判断用户是否修改了个人资料
  if (JSON.stringify(userInfo.value) != JSON.stringify(originUserInfo.value)) {
    // 先判断用户是否点击了保存按钮
    if (clickConfirmBtn.value) {
      // 保存了，直接返回
      router.go(-1)
    } else {
      // 未保存，提示是否保存
      showConfirmDialog({
        title: '提示',
        message: '是否保存修改？',
        confirmButtonText: '保存',
        cancelButtonText: '放弃',
      }).then(() => {
        // 点击保存，调用保存接口，然后返回
        clickConfirmBtn.value = true
        userUpdate.value(userInfo.value)
        // 延迟返回，等待动画结束
        setTimeout(() => {
          router.go(-1)
        }, 2000)
      }).catch(() => {
        // 放弃了，也应该返回
        userInfo.value = originUserInfo.value
        router.go(-1)
      })
    }
  } else {
    // 没有修改，直接返回
    router.go(-1);
  }
}

// 主题变量
const cellFieldTheme = reactive({
  // field-label-color
  fieldLabelColor: '#4477ee9F',

  //--van-field-disabled-text-color
  fieldDisabledTextColor: '#999',
})

// 注销账号
const writeOff = () => {
  // 先提示是否删除
  showConfirmDialog({
    title: '提示',
    message: '确定要注销账号吗？',
  }).then(() => {
    userDelete.value(userInfo.value.userid)
  }).catch(() => {
  })
}

// 更新个人资料
const updateUserInfo = () => {
  // 先判断用户是否修改了个人资料
  // 如果没有修改，则不更新
  if (JSON.stringify(userInfo.value) === JSON.stringify(originUserInfo.value)) {
    return
  }

  // 如果修改了，则直接更新
  clickConfirmBtn.value = true
  userUpdate.value(userInfo.value)
  setTimeout(() => {
    router.push({ name: 'settingView' })
  }, 1000)
}

</script>

<style scoped lang="scss">
.bottom-btn button {

  &:first-of-type,
  &:last-of-type {
    // 文字加粗
    font-weight: bold;
    border: 2px solid #ccc;
    width: 90vw;
    margin: 30px 20px;
  }

  &:last-of-type {
    font-weight: normal;
    border: none;
    position: absolute;
    bottom: 5vh;
    background-color: #4477ee;
  }
}
</style>